<template>
  <div class="wrap">
    <div style="margin-bottom:10px;">
        <el-date-picker
        :editable="false"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
        v-model="dateValue"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="dateChange">
      </el-date-picker>
      <el-select v-model="status" placeholder="状态" class="select" @change="statusChange">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
       <el-select v-model="type" placeholder="类型" class="select" @change="typeChange">
        <el-option
          v-for="item in options3"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>

       <el-select v-model="bussinessId" placeholder="业务员" style="width:120px;" @change="bussinessIdChange">
            <el-option
            v-for="item in bussinessIdOption"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>

      <el-button icon="el-icon-refresh" @click="refreshClick" style="margin-left:20px;">刷新</el-button>

      <el-button class="add-btn fr" icon="el-icon-edit" @click="addFlow">添加</el-button>
    </div>
    <el-table
      class="table"
      border fit highlight-current-row
      v-loading="loading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableData"
      style="width: 100%">
    <el-table-column
          align="center"
           width="200"
          label="日期">
          <template slot-scope="scope">
            {{_mapping.date_format2(scope.row.createTime)}}
          </template>
      </el-table-column>
       <el-table-column
        align="center"
        prop="itemName"
        label="名目">
      </el-table-column>
       <!-- <el-table-column
        align="center"
        prop="settlementname"
        label="结算账户">
      </el-table-column> -->
       <el-table-column
        align="center"
        prop="type"
        label="类型">
        <template slot-scope="scope">
            <p>{{mappingTypesMap[scope.row.type + ''] }}</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="money"
        label="金额">
      </el-table-column>
      <!-- <el-table-column
        align="center"
        prop="rechargeScore"
        label="充值积分">
      </el-table-column> -->
      <el-table-column
        align="center"
        prop="bussinessName"
        label="业务人员">
      </el-table-column>
      <el-table-column
        align="center"
        prop="pzImgUrl"
        label="凭条">
         <template slot-scope="scope">
           <a :href="scope.row.pzImgUrl" target="_blank">
              <img v-if="scope.row.pzImgUrl" :src="scope.row.pzImgUrl" class="avatar" style="margin:auto">
           </a>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <span :style="{color:(colorMap[scope.row.status + ''])}">{{statusMap[scope.row.status + '']}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="remark"
        label="备注">
      </el-table-column>
      <el-table-column
        align="center"
        prop="createTime"
        label="添加时间">
         <template slot-scope="scope">
            <p>{{_mapping.date_format(scope.row.createTime)}}</p>
          </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="操作">
          <template slot-scope="scope">

          <el-button v-if="scope.row.status===0" style="font-size:12px;" @click="checkFlow(scope.row)">审核</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="clearfix pagination" style="margin-top:30px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageNum"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum">
      </el-pagination>
    </div>

    <el-dialog title="新增" :close-on-click-modal="false" :visible.sync="dialogVisible" width="30%" class="dialog">
       <el-row class="line">
          <span class="label"><span class="red">*</span>类型</span>
          <el-select v-model="addData.type" placeholder="请选择" class="select" @change="typeChange2(addData.type)">
              <el-option
                v-for="item in options_type"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
      </el-row>
       <el-row class="line">
          <span class="label"><span class="red">*</span>类目</span>
          <el-select v-model="addData.itemId" placeholder="请选择" class="select" >
              <el-option
                v-for="item in options_itemId"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
      </el-row>
       <el-row class="line">
          <span class="label"><span class="red">*</span>金额</span>
           <el-input
              class="input"
              placeholder="金额（整数）"
              v-model="addData.money"
              clearable>
            </el-input>
      </el-row>

       <el-row class="line">
          <span class="label"><span class="red">*</span>业务人员</span>
          <el-select v-model="addData.bussinessId" placeholder="请选择" class="select">
              <el-option
                v-for="item in bussinessIdOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
      </el-row>

       <el-row class="line">
          <span class="label"><span class="red">*</span>备注</span>
           <el-input style="width:400px"
              class="input"
              v-model="addData.remark"
              clearable>
            </el-input>
      </el-row>

      <el-row class="line">
          <span class="label"><span class="red">*</span>凭条</span>
          <el-upload
            class="avatar-uploader"
            :action="getUploadOss()"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="addData.pzImgUrl" :src="addData.pzImgUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="审核" :close-on-click-modal="false" :visible.sync="dialogVisible_check" width="30%" class="dialog_check">
     
       <el-row class="line">
          <span class="label"><span class="red">*</span>类型</span>
          <el-select v-model="addData.type" placeholder="请选择" class="select" @change="typeChange2(addData.type)" disabled>
            <el-option
              v-for="item in options_type"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
      </el-row>
       <el-row class="line">
          <span class="label"><span class="red">*</span>类目</span>
          <el-select v-model="addData.itemId" placeholder="请选择" class="select" disabled>
              <el-option
                v-for="item in options_itemId"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
      </el-row>
       <el-row class="line">
          <span class="label"><span class="red">*</span>金额</span>
           <el-input
              class="input" disabled
              placeholder="金额（整数）"
              v-model="addData.money"
              clearable>
            </el-input>
      </el-row>

       <el-row class="line">
          <span class="label"><span class="red">*</span>业务人员</span>
          <el-select v-model="addData.bussinessId" placeholder="请选择" class="select" disabled>
              <el-option
                v-for="item in bussinessIdOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
      </el-row>

       <el-row class="line">
          <span class="label"><span class="red">*</span>状态</span>
          <el-select v-model="addData.status" placeholder="状态" class="select">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-row>

       <el-row class="line">
          <span class="label"><span class="red">*</span>备注</span>
           <el-input style="width:400px"
              class="input"
              v-model="addData.remark"
              clearable>
            </el-input>
      </el-row>

      <el-row class="line">
          <span class="label"><span class="red">*</span>凭条</span>
          <a :href="addData.pzImgUrl" target="_blank"   class="avatar-uploader" >
            <img v-if="addData.pzImgUrl" :src="addData.pzImgUrl"  class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </a>
         
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_check = false">取 消</el-button>
        <el-button type="primary" @click="confirmClick_check">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import _finance from'@/services/financeFlow.js'
import _base from'@/services/base.js'
export default {
  data() {
    return {
      newUserSwitch: false,
      dialogVisible:false,
      dialogVisible_check:false,
      status: '',
      type:'',
      bussinessId:'',
      dateValue: '',
      settlementId:'',
      options_type:[
        {
          value: 0,
          label: '贷超充值-收入'
        }, {
          value: 1,
          label: '渠道支出-支出'
        }, {
          value: 2,
          label: '渠道退款'
        }, {
          value: 3,
          label: '产品退款'
        }
      ],
      options_itemId:[
         

      ],
      options_bussinessId:[],
      colorMap: {
        '0': 'green',// 下线颜色
        '1': '#409EFF',//上线颜色
        '2': '#ff0000'//禁用颜色
      },
      statusMap: {
        '0': '未审核',
        '1': '正常',
        '2': '审核失败'
      },
      mappingTypesMap:{
        '0':'贷超充值-收入',
        '1':'渠道支出-支出'
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      query: {
        pageNum: 1,
        pageSize: 30
      },
      totalNum: 0,
      tab: {
        registerPayTotal: 0,
      
      },
       options2: [{
        value: 0,
        label: '未审核'
      }, {
        value: 1,
        label: '通过'
      }, {
        value: 2,
        label: '审核失败'
      }],
      options3: [{
        value: 0,
        label: '贷超充值-收入'
      }, {
        value: 1,
        label: '渠道支出-支出'
      }, {
        value: 2,
        label: '渠道退款'
      }, {
        value: 3,
        label: '产品退款'
      }],
      bussinessIdOption: [],
      loading: false,
      tableData: [],
      addData: {
        pzImgUrl: '',
        itemId: '',
        type:'',
        money:'',
        bussinessId:'',
        remark:'',
        status:''
      }
    }
  },
  methods: {
    checkFlow(item){
        this.dialogVisible_check=true
        this.addData={
          id:item.id,
          pzImgUrl:item.pzImgUrl,
          itemId:item.itemId,
          type:item.type,
          money:item.money,
          bussinessId:item.bussinessId,
          remark:item.remark,
          status:item.status
        }

    },
    confirmClick_check(){
      let params = {
        "id": this.addData.id,
        "remark": this.addData.remark,
        "status": this.addData.status,
        "type": this.addData.type,
        "money": this.addData.money,
        "itemId": this.addData.itemId
      }
      _finance.checkFlow(params)
      .then(res => {
        if(res.data.code === 200){
            this.$msg.success(`操作成功`)
          this.getFinanceFlow()
          this.dialogVisible_check=false
        }else{
          this.$msg.error(res.data.msg)
           this.getFinanceFlow()
        }
      })
    },
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getFinanceFlow()
    },
    handleCurrentChange(val) {
      this.query.pageNum = val
      this.getFinanceFlow()
    },
    // 仅看新用户开关
    newUserSwitchChange(val){
      this.getFinanceFlow()
    },
 
    // 日期改变
    dateChange(val){
      this.getFinanceFlow()
    },
    // 刷新按钮
    refreshClick(){
      this.getFinanceFlow()
    },
    getFinanceFlow(){
      this.loading = true
      let params = {
        "isNewUser": this.newUserSwitch ? 1 : 0,
        "pageNum": this.query.pageNum,
        "pageSize": this.query.pageSize,
        // "platform": "string",
        "searchDate": this.dateValue,
        "type": this.type,
        "status": this.status,
        "bussinessId":this.bussinessId,
        "settlementId":this.settlementId
      }
      _finance.getFinanceFlow(params)
      .then(res => {
        this.tableData = res.data.list || []
        this.totalNum = res.data.total
        this.loading = false
      
      })
    },
    // 账号状态change
    statusChange(val){
      this.getFinanceFlow()
    },
      // 业务员
    bussinessIdChange(item){
        this.getFinanceFlow()
    },
    settlementIdChange(){
        this.getFinanceFlow()
    },
    typeChange(){
        this.getFinanceFlow()
    },
    typeChange2(type){
      if(type===0){
        // 产品充值-收入 类目查询产品
        _base.getProductList()
      .then(res => {
       if(res.data && res.data.length){
           this.options_itemId=[]
            res.data.map(json => {
              console.info("json",json)
             
              let item = {}
              item.value = json.id
              item.label = json.name
              this.options_itemId.push(item)
            })
          }
        })
      }else{
        // 渠道支出-支出 类目查询渠道
          _base.getChannelList()
          .then(res => {
            if(res.data && res.data.length){
               this.options_itemId=[]
              res.data.map(json => {
                let item = {}
                item.value = json.channelId
                item.label = json.name
                this.options_itemId.push(item)
              })
            }
          })
      }
    },
    // 获取业务人员下拉
    getBussinessIdList(){
        _base.getBussinessIdList()
        .then(res => {
            if(res.data && res.data.length){
                res.data.map(json => {
                    let item = {}
                    item.value = json.id
                    item.label = json.name
                    this.bussinessIdOption.push(item)
                })
            }
        })
    },
    addFlow(){
      this.dialogVisible=true
      this.addData = {
        pzImgUrl: '',
        itemId: '',
        type:'',
        money:'',
        remark:'',
        bussinessId:''
      }
    },
    getUploadOss(){
      console.log('_base.uploadToOss()', _base.uploadToOss())
      return _base.uploadPzToOss()
    },
    confirmClick(){
        let params = this.addData
        delete params.productId
        _finance.addFlow(params)
          .then(res => {
              console.log('res', res.data)
              if(res.data.code === 200){
                  this.$msg.success('添加成功')
                  this.dialogVisible = false
                  this.getList()
              }else{
                  this.$msg.error(res.data.msg)
              }
          })
        this.getFinanceFlow()
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG && !isGIF) {
        this.$msg.error('上传图片只能是 JPG/PNG/GIF 格式!')
      }
      if (!isLt2M) {
        this.$msg.error('上传图片大小不能超过 2MB!')
      }
      return (isJPG || isPNG || isGIF) && isLt2M
    },
    handleAvatarSuccess(res, file) {
      console.log('res', res)
      if (res.code === 200) {
        this.addData.pzImgUrl = `https://chaolehua-main.oss-cn-shenzhen.aliyuncs.com/${res.result}`  
      }
      console.log('this.addData.pzImgUrl', this.addData.pzImgUrl)
   }
  },
  created(){
    this.dateValue = this._mapping.date_format2(new Date())
    this.getFinanceFlow()
    this.getBussinessIdList()
 
  }
}
</script>
<style lang="scss" scoped>
@import '~styles/variables.scss';
.wrap{
  .select{
      width:150px;
    }
    .input{
      display: inline-block;
      width:200px;
    }
  .avatar-uploader{
    display: inline-block;
    border-radius: 6px;
    border: 1px dotted #ccc;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
  }
  .avatar {
    width: 80px;
    height: 80px;
    display: block;
  }
  .add-btn{
    width: 100px;
    background: $theme-color;
    color: #fff;
    font-size: 14px;
    margin-top: 5px;
  }
  .dialog{
    .line{
        margin-bottom: 15px;
    }
    .label{
        width:100px;
        display: inline-block;
        text-align: right;
        margin-right: 5px;
        font-size: 12px;
    }
  }
  .dialog_check{
    .line{
        margin-bottom: 15px;
    }
    .label{
        width:100px;
        display: inline-block;
        text-align: right;
        margin-right: 5px;
        font-size: 12px;
    }
  }
}
</style>